<template>
  <!-- 设置窗口 -->
  <div
    v-show="infoStore.isShowSetting"
    class="setting-container"
    :style="{
      top: infoStore.isMobile ? '250px' : '200px',
      opacity: `${opacity}`,
    }"
  >
    <div class="set-item diff-mode">
      <!-- 重置按钮 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="重置按钮"
        placement="top-start"
      >
        <el-button
          type="danger"
          icon="el-icon-message el-icon-refresh-right"
          circle
          size="mini"
          :disabled="infoStore.isStarted || !isSet"
          @click="handleReset"
        ></el-button>
      </el-tooltip>
      <!-- 困难模式 -->
      <div class="title">困难模式</div>
      <div class="switch control">
        <el-switch
          v-model="isDiffMode"
          active-color="#ff9a63"
          inactive-color="#ffeb93"
          :width="infoStore.isMobile ? 24 : 36"
          :disabled="!isSet"
        >
        </el-switch>
      </div>
    </div>
    <!-- 初始卡片数 -->
    <div class="set-item cardNumBox">
      <div class="title">初始卡片数</div>
      <div class="slider control">
        <el-slider
          v-model="cardNum"
          :min="minNum < clearCard * 7 ? clearCard * 7 : minNum"
          :max="maxNum"
          :disabled="!isSet"
        ></el-slider>
        <!-- :step="infoStore.clearCard" -->
        <div class="num">{{ cardNum }}</div>
      </div>
    </div>
    <!-- 卡槽容量 -->
    <div class="set-item no-right-bor">
      <div class="title">卡槽容量</div>
      <div class="inputNum control">
        <button
          class="el-icon-arrow-left"
          @click="
            changeInputNum(
              { min: 3, max: 10 },
              slotMaxNum - 1,
              'setSlotMaxNum',
              'slotMaxNum',
              slotMaxNum - 1 > clearCard
            )
          "
          :disabled="!isSet"
        >
          <!-- &lt; -->
        </button>
        <span>
          {{ slotMaxNum }}
        </span>
        <button
          class="el-icon-arrow-right"
          @click="
            changeInputNum(
              { min: 4, max: 10 },
              slotMaxNum + 1,
              'setSlotMaxNum',
              'slotMaxNum'
            )
          "
          :disabled="!isSet"
        >
          <!-- &gt; -->
        </button>
      </div>
    </div>
    <!-- 彩色卡片 -->
    <div class="set-item switchColor">
      <div class="title">彩色卡片</div>
      <div class="switch control">
        <el-switch
          v-model="isColor"
          active-color="#b6b6ff"
          inactive-color="#ececec"
          :width="infoStore.isMobile ? 24 : 36"
          :disabled="!isSet"
        >
        </el-switch>
      </div>
    </div>
    <!-- 卡片消除数 -->
    <div class="set-item">
      <div class="title cardTitle-mr6">卡片消除数</div>
      <div class="inputNum control">
        <button
          class="el-icon-arrow-left"
          @click="
            changeInputNum(
              { min: 2, max: 8 },
              clearCard - 1,
              'setClearCard',
              'clearCard'
            )
          "
          :disabled="!isSet"
        >
          <!-- &lt; -->
        </button>
        <span>
          {{ clearCard }}
        </span>
        <button
          class="el-icon-arrow-right"
          @click="
            changeInputNum(
              { min: 2, max: 8 },
              clearCard + 1,
              'setClearCard',
              'clearCard',
              clearCard + 1 < slotMaxNum
            )
          "
          :disabled="!isSet"
        >
          <!-- &gt; -->
        </button>
      </div>
    </div>
    <!-- 卡片种类数 -->
    <div class="set-item no-right-bor">
      <div class="title cardTitle-mr6">卡片种类数</div>
      <div class="inputNum control">
        <button
          class="el-icon-arrow-left"
          @click="
            changeInputNum(
              { min: 4, max: 18 },
              cardTypes - 1,
              'setCardTypes',
              'cardTypes'
            )
          "
          :disabled="!isSet"
        >
          <!-- &lt; -->
        </button>
        <span>
          {{ cardTypes }}
        </span>
        <button
          class="el-icon-arrow-right"
          @click="
            changeInputNum(
              { min: 4, max: 18 },
              cardTypes + 1,
              'setCardTypes',
              'cardTypes'
            )
          "
          :disabled="!isSet"
        >
          <!-- &gt; -->
        </button>
      </div>
    </div>
    <!-- 生成动画 -->
    <div class="set-item switchColor">
      <div class="title">生成动画</div>
      <div class="switch control">
        <el-switch
          v-model="isAnim"
          active-color="#b7d9ff"
          inactive-color="#ececec"
          :width="infoStore.isMobile ? 24 : 36"
          :disabled="!isSet"
        >
        </el-switch>
      </div>
    </div>
    <!-- 卡片区宽度 -->
    <div class="set-item">
      <div class="title cardTitle-mr6">卡片区宽度</div>
      <div class="inputNum control">
        <button
          class="el-icon-arrow-left"
          @click="
            changeInputNum({ min: 7, max: 16 }, sizeW - 1, 'setSizeW', 'sizeW')
          "
          :disabled="!isSet"
        >
          <!-- &lt; -->
        </button>
        <span>
          {{ sizeW }}
        </span>
        <button
          class="el-icon-arrow-right"
          @click="
            changeInputNum({ min: 7, max: 16 }, sizeW + 1, 'setSizeW', 'sizeW')
          "
          :disabled="!isSet"
        >
          <!-- &gt; -->
        </button>
      </div>
    </div>
    <!-- 卡片区高度 -->
    <div class="set-item no-right-bor">
      <div class="title cardTitle-mr6">卡片区高度</div>
      <div class="inputNum control">
        <button
          class="el-icon-arrow-left"
          @click="
            changeInputNum({ min: 7, max: 16 }, sizeH - 1, 'setSizeH', 'sizeH')
          "
          :disabled="!isSet"
        >
          <!-- &lt; -->
        </button>
        <span>
          {{ sizeH }}
        </span>
        <button
          class="el-icon-arrow-right"
          @click="
            changeInputNum({ min: 7, max: 16 }, sizeH + 1, 'setSizeH', 'sizeH')
          "
          :disabled="!isSet"
        >
          <!-- &gt; -->
        </button>
      </div>
    </div>
    <!-- 是否减少重叠 -->
    <div class="set-item switchColor">
      <div class="title ml-10">是否减少重叠</div>
      <div class="switch control">
        <el-switch
          v-model="isReduceOverlap"
          active-color="#fffc9e"
          inactive-color="#ececec"
          :width="infoStore.isMobile ? 24 : 36"
          :disabled="!isSet"
        >
        </el-switch>
      </div>
    </div>
    <!-- 游戏区缩放 -->
    <div class="set-item">
      <div class="title">游戏区缩放</div>
      <div class="slider control">
        <el-slider
          v-model="cardSizeOne"
          :min="20"
          :max="100"
          :disabled="!isSet"
        ></el-slider>
      </div>
    </div>
    <div class="set-item no-right-bor">
      <div class="title"></div>
    </div>
    <div class="set-item no-bottom-bor">
      <div class="title"></div>
    </div>
    <div class="set-item no-bottom-bor">
      <div class="title"></div>
    </div>
    <div class="set-item no-bottom-bor no-right-bor">
      <div class="title"></div>
    </div>
  </div>
</template>

<script>
import delay from "@/utils/delay";
import getRandom from "@/utils/getRandom";
import closeTips from "@/utils/closeTips";
import getCardVoice from "@/assets/audio/succVoice/1.mp3";
import levelData from "@/store/levelData";
import { getUsers, setUsers } from "@/api/user";
export default {
  data() {
    return {
      infoStore: this.$store.state.info,
      cardStore: this.$store.state.cards,
      defaStore: this.$store.state.defaData,
      requStore: this.$store.state.requestData,
      isDiffMode: !this.$store.state.info.isEasy, // 是否开启困难模式
      cardNum: this.$store.state.info.cardNum, // 初始卡片数
      slotMaxNum: this.$store.state.info.slotMaxNum, // 卡槽容量
      clearCard: this.$store.state.info.clearCard, // 卡槽中每次消除卡片的个数
      cardTypes: this.$store.state.info.cardTypes.length, // 选择的卡片种类数
      isColor: this.$store.state.info.isColor, // 是否使用彩色卡片
      isAnim: this.$store.state.info.isAnim, // 是否开启生成动画
      isReduceOverlap: this.$store.state.info.isReduceOverlap, // 是否减少卡片重叠
      sizeW: this.$store.state.info.size.w, // 卡片区宽高
      sizeH: this.$store.state.info.size.h,
      users: [], // 获取的所有用户信息
      // 卡片尺寸 [游戏区整体缩放]
      cardSizeOne: this.$store.state.info.isMobile
        ? this.$store.state.info.cardSize2
        : this.$store.state.info.cardSize,
      isSet: true, // 是否可以修改设置内容
      opacity: 0, // 设置窗口的透明度
    };
  },
  watch: {
    // 监听变化
    isDiffMode(newVal) {
      this.$store.commit("info/setIsEasy", !newVal);
    },
    cardNum(newVal) {
      this.$store.commit("info/setCardNum", newVal);
    },
    isColor(newVal) {
      this.$store.commit("info/setIsColor", newVal);
    },
    isAnim(newVal) {
      this.$store.commit("info/setIsAnim", newVal);
    },
    isReduceOverlap(newVal) {
      this.$store.commit("info/setIsReduceOverlap", newVal);
    },
    cardSizeOne(newVal) {
      this.$store.commit(
        "info/setCardSize" + (this.infoStore.isMobile ? "2" : ""),
        newVal
      );
    },
  },
  computed: {
    minNum() {
      let num = parseInt(
        (3.3 - this.clearCard * 0.1) *
          (3 * this.slotMaxNum -
            2 * this.clearCard -
            2 +
            2 * this.sizeW -
            20 +
            2 * this.sizeH -
            20)
      );
      num = parseInt(num / this.clearCard) * this.clearCard;
      return num;
    },
    maxNum() {
      let num = parseInt(
        (3.45 - this.clearCard * 0.15) *
          (100 +
            this.slotMaxNum * (this.slotMaxNum - 3) -
            18 -
            12 * this.clearCard +
            36 +
            parseInt((this.sizeW * this.sizeH) / 2) -
            50)
      );
      num = parseInt(num / this.clearCard) * this.clearCard;
      return num;
    },
  },
  mounted() {
    // 监听游戏开始事件
    this.$bus.$on("gameStart", this.handleGameStart);
    // 监听点击设置事件
    this.$bus.$on("clickSetting", this.handleClickSetting);
    // 监听游戏结束事件
    this.$bus.$on("gameOver", this.handleGameOver);
    // 监听游戏胜利事件
    this.$bus.$on("gameWin", this.handleGameWin);
    // 监听关卡挑战胜利事件
    this.$bus.$on("levelModeSuccess", this.handleLevelSuccess);
    // 监听开始关卡模式事件
    this.$bus.$on("levelModeStart", this.handleLevelModeStart);
  },
  beforeDestroy() {
    // 移除监听
    this.$bus.$off("gameStart", this.handleGameStart);
    this.$bus.$off("clickSetting", this.handleClickSetting);
    this.$bus.$off("gameOver", this.handleGameOver);
    this.$bus.$off("gameWin", this.handleGameWin);
    this.$bus.$off("levelModeSuccess", this.handleLevelSuccess);
    this.$bus.$off("levelModeStart", this.handleLevelModeStart);
  },
  methods: {
    // 游戏开始的事件处理函数
    async handleGameStart() {
      this.$store.commit("info/setCardProb", this.getProb());
      if (this.infoStore.isShowSetting) {
        this.handleClickSetting(); // 关闭设置窗口
      }
    },
    // 点击设置的处理函数
    async handleClickSetting(isOpen = true) {
      // isOpen: 是否能打开
      if (this.infoStore.isShowSetting) {
        this.opacity = 0;
        await delay(500);
        closeTips();
        this.$store.commit("info/setCardProb", this.getProb());
        this.$store.commit("info/setIsShowSetting", false); // 隐藏设置窗口
      } else if (isOpen) {
        if (!this.isSet) {
          return;
        }
        this.$store.commit("info/setIsShowSetting", true); // 显示设置窗口
        this.opacity = 0;
        await delay(10);
        this.opacity = 1;
      }
    },
    // 开始关卡挑战
    async handleLevelModeStart() {
      // this.handleReset(); // 重置设置参数
      const levelNum = this.cardStore.levelNum;
      // 设置游戏参数[仓库数据]
      this.$store.commit("info/setIsEasy", levelData[levelNum].isEasy); // 是否开启困难模式
      this.$store.commit("info/setCardNum", levelData[levelNum].cardNum); // 初始卡片数
      this.$store.commit("info/setSlotMaxNum", levelData[levelNum].slotMaxNum); // 卡槽容量
      this.$store.commit("info/setClearCard", levelData[levelNum].clearCard); // 卡槽中每次消除卡片的个数
      this.$store.commit("info/setCardTypes", levelData[levelNum].cardTypes); // 选择的卡片种类数
      this.$store.commit("info/setSizeW", levelData[levelNum].size.w); // 游戏区 宽度 [密排的情况下每 行/列 的最大的卡片数]
      this.$store.commit("info/setSizeH", levelData[levelNum].size.h); // 游戏区 高度
      // 更新设置页面数据
      this.isDiffMode = !this.infoStore.isEasy; // 是否开启困难模式
      this.cardNum = this.infoStore.cardNum; // 初始卡片数
      this.slotMaxNum = this.infoStore.slotMaxNum; // 卡槽容量
      this.clearCard = this.infoStore.clearCard; // 卡槽中每次消除卡片的个数
      this.cardTypes = this.infoStore.cardTypes.length; // 选择的卡片种类数
      this.sizeW = this.infoStore.size.w; // 游戏区宽高
      this.sizeH = this.infoStore.size.h;
      await delay(10);
      this.$bus.$emit("gameStart");
    },
    // 关卡挑战成功
    async handleLevelSuccess() {
      this.$store.commit("info/setIsBanLevelModeBtn", true); // 禁止点击关卡模式按钮
      if (this.cardStore.levelNum >= 6 || !this.infoStore.isLevelMode) {
        await this.getCardFun();
        if (this.cardStore.levelNum === 1) {
          delay(300);
          await this.getCardFun();
          delay(300);
          await this.getCardFun();
        }
        this.updateUser(); // 更新cos中的用户信息, 这里不用await是为了减少用户等待时间 [put请求]
      }
      if (this.infoStore.isLevelMode) {
        if (this.cardStore.levelNum >= 5) {
          this.$store.commit("cards/setIsPass", true); // 重置'消息'卡片的效果
        }
        await delay(4000);
        this.$store.commit("cards/setLevelNum", this.cardStore.levelNum + 1); // 关卡数+1
        this.$store.commit("info/setIsBanLevelModeBtn", false); // 允许点击关卡模式按钮
        this.$store.commit("cards/putLevel"); // 保存仓库的关卡进度至本地
        // this.$store.commit("cards/setLevelNum", this.cardStore.levelNum + 8); // 测试 [上面那行不需要注释掉]
        // 等待4.5s后自动开始下一关
        // 弹窗
        this.$message({
          showClose: true,
          message: `第 ${this.cardStore.levelNum} 关挑战开始！`,
          type: "success",
          duration: 3000,
          offset: this.infoStore.isMobile ? 148 : 60,
        });
        // this.handleLevelModeStart(); // 抛出"开始关卡模式"事件 [这里不用抛出是因为该事件的处理函数就在该组件中]
        this.$bus.$emit("levelModeStart"); // 为了让其他组件也监听到, 所以还是抛出了该事件
      }
    },
    // 游戏结束
    async handleGameOver() {
      // if (this.infoStore.isLevelMode) {
      //   return;
      // }
      // await delay(1000);
      // this.handleClickSetting();
      // this.isSet = false;
      // await delay(3000);
      // await this.handleClickSetting();
      // this.isSet = true;
    },
    // 计算获得卡片的概率
    getProb() {
      // 标准模式下获得卡片的概率为15%
      const curNum = this.cardNum;
      const max = this.maxNum;
      const slotMaxNum = this.infoStore.slotMaxNum;
      const clearCard = this.infoStore.clearCard;
      const cardTypes = this.infoStore.cardTypes.length;
      const sizeW = this.infoStore.size.w;
      const sizeH = this.infoStore.size.h;
      // console.log(`
      // curNum: ${curNum}
      // max: ${max}
      // slotMaxNum: ${slotMaxNum}
      // clearCard: ${clearCard}
      // cardTypes: ${cardTypes}
      // sizeW: ${sizeW}
      // sizeH: ${sizeH}
      // `);
      let prob =
        ((curNum / max) *
          27.2 *
          (4 / (slotMaxNum - 2)) *
          ((clearCard - 1.5) / 1.5) *
          (cardTypes / 11) *
          ((sizeW + 5) / 15) *
          ((sizeH + 5) / 15) +
          ((curNum - 10) / max) *
            1.5 *
            ((5 * (clearCard - 1.5)) / 1.5 / 2) *
            ((cardTypes / 11) * 2)) /
        100;
      // 困难模式概率翻倍
      if (!this.infoStore.isEasy && clearCard >= 3) {
        // 平衡困难模式
        for (let i = 5; i >= 0; i--) {
          if (curNum > 35 + 25 * i) {
            prob *= 1.2 + i * 0.22;
            break;
          }
        }
      }
      if (clearCard === 2) {
        // 平衡不合理的情况的概率 [2消 数量多 种类多 区域小 卡槽少 而造成的高概率] [因为这种情况还是很简单, 但却出现了极高的卡片获取率]
        if (prob >= 0.5) {
          const dis = prob - 0.5;
          prob = 0.05 + dis / 10;
        } else {
          prob = prob * 0.2;
        }
      }
      if (clearCard !== 2) {
        // 平衡不合理的情况的概率 [3消 数量少 种类多 区域小 卡槽中 而造成的高概率] [这种情况因为数量极少, 种类多的效果没有体现出来, 还是很简单]
        for (let i = 1; i <= 4; i++) {
          if ((i + 3) * cardTypes > curNum) {
            prob = (prob * (i * 2)) / 10;
            prob = prob * (1.2 / (clearCard - 1.8));
            break;
          }
        }
      }
      // console.log(
      //   "min",
      //   Math.floor((90 / (prob * 2)) * 0.1),
      //   " max",
      //   Math.floor(90 / (prob * 2))
      // );

      const isTest = false; // 是否使用以下测试
      // 测试时使用
      if (
        isTest &&
        clearCard === 2 &&
        sizeW === 8 &&
        sizeH === 10 &&
        cardTypes === 18
      ) {
        this.$store.commit("cards/setLevelNum", 10);
        if (Math.random() < 0.6) {
          this.getCardFun();
          let msg = "my: ";
          this.cardStore.myCards.forEach((item, i) => {
            msg += item + " ";
          });
          this.$message({
            showClose: true,
            message: msg,
            duration: 30000,
            type: "success",
            offset: this.infoStore.isMobile ? 148 : 60,
          });
          let notMsg = "not: ";
          this.cardStore.notCards.forEach((item, i) => {
            notMsg += item + " ";
          });
          this.$message({
            showClose: true,
            message: notMsg,
            duration: 30000,
            type: "success",
            offset: this.infoStore.isMobile ? 168 : 60,
          });
          let localMsg = "localCard: " + localStorage.getItem("myCards");
          this.$message({
            showClose: true,
            message: localMsg,
            duration: 30000,
            type: "success",
            offset: this.infoStore.isMobile ? 188 : 60,
          });
          // this.$store.commit("cards/clearCards"); // 清空本地数据, 测试完后使用该语句
          return prob * 25;
        }
      }
      console.log("概率:", prob * 100, "%");
      return prob > 1 ? 1 : prob;
    },
    // 随机获取一张卡片
    async getCardFun() {
      if (this.cardStore.myCards.length === this.cardStore.cardData.length) {
        // 如果已经获取全部卡片
        console.log("已经获得全部卡片");
        return;
      }
      if (this.infoStore.isVolume) {
        // 播放声音
        var player = new Audio(getCardVoice);
        player.play(); //播放 mp3这个音频对象
      }
      const index = getRandom(0, this.cardStore.notCards.length - 1);
      this.$store.commit("cards/addMycards", this.cardStore.notCards[index]);
      this.$store.commit("cards/putCards"); // 保存卡片信息到本地
      await delay(500);
      // 弹窗
      this.$message({
        showClose: true,
        message: "恭喜你获得一张卡片！已放入卡片池中",
        duration: 5000,
        type: "success",
        offset: this.infoStore.isMobile ? 148 : 60,
      });
      console.log("获得", index + 1, "号卡片");
    },
    // 游戏胜利
    async handleGameWin() {
      if (this.infoStore.isLevelMode) {
        return;
      }
      await delay(10);
      // this.handleClickSetting(); // 打开设置窗口
      const random = Math.random();
      // console.log(random);
      const getCardRandom = this.getProb();
      // console.log(getCardRandom);
      // this.isSet = false;
      if (random <= getCardRandom) {
        // 获得卡片
        await this.getCardFun();
        await updateUser(); // 更新cos中的用户信息 [put请求]
      }
      // await delay(4500);
      // await this.handleClickSetting(); // 关闭设置窗口
      // this.isSet = true;
    },
    // 获取所有用户信息, 记录在this.users中, 返回{isSuccess: xxx, msg: xxx}
    async getUsersInfo() {
      if (!this.requStore.isLogin) {
        return;
      }
      let isSuccess = true; // 是否请求成功
      let msg = ""; // 登录的文本信息
      try {
        const resp = await getUsers(); // 从cos获取用户数据 [get请求]
        if (resp.status === 200 || resp.status === 304) {
          this.users = resp.data; // 记录所有用户信息
        } else {
          isSuccess = false;
          msg = "系统错误";
        }
      } catch (err) {
        console.log(err);
        this.$consolelog(err);
        isSuccess = false;
        msg = "请连接网络";
      }
      return { isSuccess, msg };
    },
    // 更新cos中的用户信息 [put请求]
    async updateUser() {
      if (!this.requStore.isLogin) {
        return;
      }
      let isSuccess = true; // 请求是否成功
      let msg = ""; // 错误信息
      const resp = await this.getUsersInfo();
      isSuccess = resp.isSuccess;
      msg = resp.msg;
      const userName = this.requStore.user.userName;
      // put请求更新账号的卡片
      const cardsPwd = localStorage.getItem("myCards"); // 读取本地卡片
      for (let i = 0; i < this.users.length; i++) {
        if (this.users[i].userName === userName) {
          // 找到自己
          this.users[i].cards = cardsPwd; // 修改自己的卡片
        }
      }
      try {
        const resp = await setUsers(this.users); // 将更新后的用户信息存入cos中 [put 请求]
        if (resp.status === 200 || resp.status === 304) {
        } else {
          msg = "系统错误";
          isSuccess = false;
        }
      } catch (err) {
        console.log(err);
        this.$consolelog(err);
        isSuccess = false;
        // msg = "请连接网络";
      }
      if (!isSuccess && msg) {
        // 显示一个弹窗
        this.$message({
          showClose: true, // 是否显示关闭按钮
          message: msg, // 内容
          duration: 3000, // 显示时间
          type: "error", // 弹窗类型
          offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
        });
      }
    },
    // 输入框改变时的处理函数
    changeInputNum(range, newNum, requName, changeNum, isSccess = true) {
      // 参数分别表示: 取值范围/更新后的数/store请求的名字/需要更改的数据Setting组件的data中的名字/是否能满足额外的通过条件
      if (!isSccess || newNum < range.min || newNum > range.max) {
        return;
      }
      this[changeNum] = newNum;
      this.$store.commit("info/" + requName, newNum); // 更改卡槽容量
    },
    // 点击重置按钮的事件
    handleReset() {
      const isM = this.infoStore.isMobile; // 当前设备是否为移动端

      // 重置仓库数据
      this.$store.commit("info/setIsEasy", this.defaStore.isEasy); // 是否开启困难模式
      this.$store.commit("info/setCardNum", this.defaStore.cardNum); // 初始卡片数
      this.$store.commit("info/setSlotMaxNum", this.defaStore.slotMaxNum); // 卡槽容量
      this.$store.commit("info/setClearCard", this.defaStore.clearCard); // 卡槽中每次消除卡片的个数
      this.$store.commit("info/setCardTypes", this.defaStore.cardTypes.length); // 选择的卡片种类数
      this.$store.commit("info/setIsColor", this.defaStore.isColor); // 是否使用彩色卡片
      this.$store.commit("info/setIsAnim", this.defaStore.isAnim); // 是否开启生成动画
      this.$store.commit("info/setSizeW", this.defaStore.size.w); // 游戏区 宽度 [密排的情况下每 行/列 的最大的卡片数]
      this.$store.commit("info/setSizeH", this.defaStore.size.h); // 游戏区 高度
      this.$store.commit(
        "info/setIsReduceOverlap",
        this.defaStore.isReduceOverlap
      ); // 是否减少重叠卡片
      this.$store.commit("info/setIsAutoAddCard", this.defaStore.isAutoAddCard); // 是否自动添加卡片
      this.$store.commit("info/setDuration", this.defaStore.duration); // 自动添加卡片的时间间隔 [单位ms]
      this.$store.commit(
        "info/setCardSize" + (isM ? "2" : ""),
        this.defaStore[isM ? "cardSize2" : "cardSize"]
      ); // 卡片尺寸 [游戏区整体缩放]

      // 重置组件内部数据
      this.isDiffMode = !this.infoStore.isEasy; // 是否开启困难模式
      this.cardNum = this.infoStore.cardNum; // 初始卡片数
      this.slotMaxNum = this.infoStore.slotMaxNum; // 卡槽容量
      this.clearCard = this.infoStore.clearCard; // 卡槽中每次消除卡片的个数
      this.cardTypes = this.infoStore.cardTypes.length; // 选择的卡片种类数
      this.isColor = this.infoStore.isColor; // 是否使用彩色卡片
      this.isAnim = this.infoStore.isAnim; // 是否开启生成动画
      this.sizeW = this.infoStore.size.w; // 游戏区宽高
      this.sizeH = this.infoStore.size.h;
      this.isReduceOverlap = this.infoStore.isReduceOverlap; // 是否减少重叠卡片
      this.cardSizeOne = isM
        ? this.infoStore.cardSize2
        : this.infoStore.cardSize; // 卡片尺寸 [游戏区整体缩放]
    },
  },
};
</script>

<style lang="less" scoped>
.setting-container {
  // .ml-10 {
  //   margin-left: 10px;
  // }
  position: absolute;
  z-index: 1405;
  left: calc(50% - 270px);
  width: 540px;
  background: #fffefb;
  border: 2px solid #aaa;
  box-sizing: border-box;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  transition: all 0.5s;

  // 每个设置项
  .set-item {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-family: Calibri, "Trebuchet MS", sans-serif;
    font-weight: bold;
    text-align: left;
    padding: 0 8px;
    position: relative;
    white-space: nowrap;
    .title {
      margin-right: 10px;
    }
    .control {
      max-width: 90px;
      flex: 0 3 auto;
    }
    &.diff-mode .title {
      margin-right: 8px;
    }
    .slider {
      width: 65px;
    }
    &.switchColor {
      .title {
        margin-right: 25px;
      }
    }
    .inputNum {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 73px;
      span {
        margin: 0 5px;
        font-size: 13px;
        font-weight: 400;
        color: #9e5d08;
      }
      button {
        width: 20px;
        height: 20px;
        // line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #9e5d08;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ccc;
        cursor: pointer;
      }
      button[disabled] {
        cursor: not-allowed;
      }
    }
    .title.cardTitle-mr8 {
      margin-right: 8px;
    }
  }
  // 设置页面内部的分隔线
  .set-item::before {
    display: block;
    content: "";
    width: 90%;
    border-bottom: 1px solid #ccc;
    position: absolute;
    left: 5%;
    bottom: 0;
  }
  .set-item::after {
    display: block;
    content: "";
    height: 80%;
    border-right: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 10%;
  }
  .no-bottom-bor::before {
    border-bottom: none;
  }
  .no-right-bor::after {
    border-right: none;
  }
  // 按钮
  .el-icon-arrow-left,
  .el-icon-arrow-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
// 卡槽容量右上角角标
.cardNumBox .num {
  position: absolute;
  top: -12px;
  right: 2px;
  color: #c6c6c6;
  font-size: 12px;
}

// 重置按钮
.el-button.el-button--danger.is-circle {
  font-size: 16px;
  margin-right: 14px;
  position: relative;
}
.el-button.el-tooltip.el-button--danger.is-circle::after {
  display: block;
  content: "";
  height: 100%;
  border-right: 1px solid #ccc;
  position: absolute;
  right: -8px;
  top: 0;
}
</style>
